<!-- eslint-disable max-len -->
<template>
  <div class="taskVerifyDetail h100">
    <!-- 操作栏 -->
    <div class="taskVerifyDetailFooter" style="width:100%;display:flex;">
      <div style="transform:scale(0.9);margin-left:-20px;">
        <registerSteps :audit="BottomType==='pendingReview'" :activeIndex="activeIndex"/>
      </div>
      <div style="transform:scale(0.9);flex:1">
          <div v-if="BottomType==='passedApplication'" style="float:right;margin-top:30px;">
            <a-button style="margin-left: 10px">
              <span class="titleBold">{{ $t('auditResult')+"：" }}</span>
              <span class="ok titleBold">{{ $t('passed') }}</span>
            </a-button>
            <a-button style="margin-left: 10px">
              <span class="titleBold ">{{ $t('completeTime')+"：" }}</span>
              <span class="ok titleBold">{{ endTime }}</span>
            </a-button>
          </div>
          <!-- 我的审核查看驳回 -->
          <div v-if="BottomType==='rejectedApplication'" style="float:right;margin-top:0">
            <div style="float:right;margin-top:30px;" v-if="!fromApplication">
              <a-button style="margin-left: 10px">
                <span class="titleBold">{{ $t('formStatus')+"：" }}</span>
                <span class="reject titleBold">{{ $t('rejected') }}</span>
              </a-button>
              <a-button style="margin-left: 10px">
                <span class="titleBold ">{{ $t('completeTime')+"：" }}</span>
                <span class="ok titleBold">{{ endTime }}</span>
              </a-button>
            </div>
            <!-- 我的申请查看驳回 -->
            <div style="display:flex;" v-else>
              <div style="display:flex;flex-direction: column">
                <a-button style="margin-bottom: 20px">
                  <span class="titleBold">{{ $t('formStatus')+"：" }}</span>
                  <span class="reject titleBold">{{ $t('rejected') }}</span>
                </a-button>
                <a-button>
                  <span class="titleBold ">{{ $t('completeTime')+"：" }}</span>
                  <span class="ok titleBold">{{ endTime }}</span>
                </a-button>
              </div>
              <div style="margin-top:50px" v-if="fromApplication && isReadonly">
                <auth-button type="primary" style="margin-left: 10px" @click="reEditForm">
                  {{ $t('reEdit') }}
                </auth-button>
                <!-- <auth-button type="danger" :auth="todoPerms.apply.repealInstance" style="margin-left: 10px;" @click="fz">
                  {{ $t('repeal') }}
                </auth-button > -->
              </div>
              <div v-if="fromApplication && !isReadonly">
                <div style="display:flex;flex-direction: column;margin-left: 10px">
                  <div>
                    <auth-button @click="handleSubmit" style="margin-bottom: 20px;width:95%">{{ '再次提交' }}</auth-button>
                  </div>
                  <div>
                    <auth-button type="primary" :ghost="true" @click="cancelReeditAction" v-if="fromAction">
                      {{ $t('cancel') }}
                    </auth-button >
                    <auth-button type="primary" :ghost="true" @click="cancelReedit" v-else>
                      {{ $t('cancel') }}
                    </auth-button >
                    <!-- <auth-button type="danger" style="margin-left: 10px" @click="fz" :auth="todoPerms.apply.repealInstance">
                      {{ $t('repeal') }}
                    </auth-button > -->
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div v-if="BottomType==='pendingReview'" style="float:right;margin-top:30px;">
            <auth-button :auth="todoPerms.review.pass" type="primary" style="margin-left: 10px" @click="pass">
              {{ $t('pass') }}
            </auth-button >
            <auth-button type="danger" :auth="todoPerms.review.reject" @click="reject" style="margin-left: 10px" >
              {{ $t('reject') }}
            </auth-button >
               <!-- 转交 -->
            <auth-button :auth="todoPerms.review.pass" v-if="hideTransfor"  @click="transferReviewInfo" style="margin-left: 10px" >
              {{ $t('transfer') }}
            </auth-button >
          </div>
            <div v-if="BottomType==='transforReview'" style="float:right;margin-top:30px">
               <a-button style="margin-left: 10px">
              <span class="titleBold">{{ $t('auditResult')+"：" }}</span>
              <span class="reject titleBold">{{ $t('forwardedTo') }}</span>
            </a-button>
            <a-button style="margin-left: 10px">
              <span class="titleBold ">{{ $t('completeTime')+"：" }}</span>
              <span class="ok titleBold">{{ endTime }}</span>
            </a-button>
            </div>
          </div>
    </div>
    <!-- 表单内容 -->
    <div class="taskVerifyDetailTop detailPaddingPage" style="background:#ECECEC" @scroll="handleScroll($event)">
      <a-form-model
        ref="newEditForm"
        :rules="rules"
        :model="formData">
        <!--  -->
        <a-card class="card-radius basic-info-style" id="sw-step-1">
          <BaseInfo :baseInfo="formData.step1" ref="baseInfoRef" :isReadonly="isReadonly"/>
        </a-card>
        <a-card class="card-radius basic-info-style" id="sw-step-2">
          <CarBrandSelect style="padding" :carBrandInfo="formData.step2" ref="CarBrandSelectRef" :isReadonly="isReadonly"/>
        </a-card>
        <a-card class="card-radius basic-info-style" id="sw-step-3">
          <a-form-model-item label="备注说明"  prop="step3.note">
            <a-textarea
              v-model="formData.step3.note"
              style="height:150px"
              :readOnly="isReadonly"
            />
          </a-form-model-item>
        </a-card>
        <a-card class="card-radius basic-info-style" id="sw-step-4">
          <a-form-model-item>
            <a-row :gutter="80">
              <a-col :md="8" :sm="24">
                <a-form-model-item label="申请人姓名">
                  <a-input :value="formData.step1.basic.name||'-'" readOnly/>
                </a-form-model-item>
              </a-col>
              <a-col :md="8" :sm="24">
                <a-form-model-item label="工号">
                  <a-input :value="formData.step1.basic.account||'-'" readOnly/>
                </a-form-model-item>
              </a-col>
              <a-col :md="8" :sm="24">
                <a-form-model-item label="邮箱">
                  <a-input :value="formData.step1.basic.email||'-'" readOnly/>
                </a-form-model-item>
              </a-col>
              <a-col :md="8" :sm="24">
                <a-form-model-item label="所属组织架构">
                  <a-input :value="formData.step1.orgName||'-'" readOnly/>
                </a-form-model-item>
              </a-col>
              <a-col :md="8" :sm="24">
                <a-form-model-item label="电话">
                  <a-input :value="formData.step1.basic.phone||'-'" readOnly/>
                </a-form-model-item>
              </a-col>
              <a-col :md="8" :sm="24">
                <a-form-model-item label="申请日期">
                  <a-input :value="$options.filters.moment(formData.createTime)||'-'" readOnly/>
                </a-form-model-item>
              </a-col>
            </a-row>
          </a-form-model-item>
          <!-- 审核流程 -->
          <audit-flow-process
            v-if="!isReadonly"
            ref="auditProcessRef"
            method-name="getUserRegister"
            :candidate="candidateTodraft"
            :applyUserName="formData.step1.basic.name"
          />
          <review-process
            v-else
            style="padding:0;height:300px"
            :applyUserName="formData.step1.basic.name"
            :createTime="formData.createTime"
            :showProcessViewer="false"
            @transTime="handleEndTime"
            @transFileLimit="handleFileLimit"
            @hideWithdrawBtn="handleHideWithdrawBtn"
            @hideWithTransforBtn="handleHideWithTransforBtn"
            @checkStatus="hancleStatusCheck"
            />
        </a-card>
        <!-- 审核意见 -->
        <a-card class="card-radius software-use-style" v-if="BottomType==='pendingReview'" id="sw-step-5">
          <span class="requiredStar">*</span>
          <span class="myLabel">{{ $t('reviewComments') }}</span>
          <div style="border:1px solid #ccc;padding:20px 20px 10px;border-radius:10px;">
          <a-row :gutter="40">
            <a-col :md="16" :sm="24">
              <a-tabs default-active-key="1" @change="changeTabs" :size="'small'">
                <a-tab-pane key="1" tab="自定义输入">
                  <a-textarea v-model="formData.taskComment" style="resize:none;height:180px;width:99%" placeholder="请输入审核意见"/>
                </a-tab-pane>
                <a-tab-pane key="2" tab="常用语选择">
                  <div style="height:180px;overflow-y: auto;overflow-x: hidden;">
                    <a-select placeholder="请选择审核常用语句"
                    :dropdownMenuStyle="{maxHeight:'110px'}"
                    v-model="formData.taskComment" class="select-style">
                      <a-select-option v-for="(item,index) in wordsArr" :key="index" :value="item" :title="item">
                        {{ item }}
                      </a-select-option>
                    </a-select>
                  </div>
                </a-tab-pane>
              </a-tabs>
            </a-col>
            <a-col :md="8" :sm="24">
              <div class="myLabel" style="margin-bottom:10px">{{ $t('上传附件文件') }}</div>
              <a-card class="card uploadAttachment-style" title="附件信息" size="small">
                <template #extra>
                  <a-upload :showUploadList="false"  :multiple="true"  :file-list="auditList" :before-upload="beforeUpload" :customRequest="doUpload">
                    <a-button :loading="uploading" style="border:1px solid #147092;color:#147092"><a-icon type="plus-circle" theme="filled" v-if="!uploading" />
                    {{ $t('uploadAttachment') }}
                    </a-button>
                  </a-upload>
                </template>
                <div class="attachmentItem" v-for="(item, index) in auditInfoList" :key="index">
                  <a class="fileName">
                    <table-ellipsis :title="item.fileName" :text="item.fileName" :tableEllipsisIsTurnLine="false"/>
                  </a>
                  <a @click="removeItem(item.fileId,index)" style="color:red">删除</a>
                </div>
              </a-card>
            </a-col>
          </a-row>
              </div>
        </a-card>
      </a-form-model>
    </div>
  </div>
</template>
<script>
import TableEllipsis from '@/components/Ellipsis/TableEllipsis'
import BaseInfo from '@/views/user/components/BaseInfo.vue';
import SubmitApply from '@/views/user/components/SubmitApply.vue';
import CarBrandSelect from '@/views/user/components/CarBrandSelect.vue';
import ReviewProcess from '@/views/todo/myApplication/components/ReviewProcessCompt'
import registerSteps from '@/views/components/step/registerSteps.vue';
import i18n from '@/lang'
import { todoPerms } from '@/config/permission/index'
import AuthButton from '@/components/AuthButton'
import lodash from 'lodash'
import AuditFlowProcess from '@/views/components/AuditFlowProcess/config.vue'
import fileUploadApi from '@/api/modules/system/fileUpload'
import SparkMD5 from 'spark-md5'

export default {
  components: {
    BaseInfo,
    SubmitApply,
    CarBrandSelect,
    ReviewProcess,
    AuthButton,
    registerSteps,
    AuditFlowProcess,
    TableEllipsis
  },
  props:{
    BottomType:{
      type:String,
      default:''
    },
  },
  data () {
    return {
      saving:false,
      fromAction:this.$route.query.from||'',
      isReadonly:true,
      endTime:undefined,
      todoPerms,
      activeIndex: this.$route.query.toReview==1 ? 3 : 0,
      activities: [
        {id: 'sw-step-1'},
        {id: 'sw-step-2'},
        {id: 'sw-step-3'},
        {id: 'sw-step-4'},
        {id: 'sw-step-5'},
      ],
      scrollHeight: [],
      auditList:[],
      auditInfoList:[],
      uploading: false,
      hideTransfor:false,
      wordsArr: [i18n.t('zxbty'), i18n.t('tyqjkcl'), i18n.t('tyqjscl'), i18n.t('tyqzhptgz'), i18n.t('bypzqhshzsq'), i18n.t('xgclbwz'), i18n.t('sqrqxbfh'), i18n.t('xqbmq')],
      baseInfo:{
        basic:{
        }
      },
      carBrandInfo:{},
      applyInfo:{},
      formData:{
        applyUserName:'',
        step1:{
          basic:{
            name:''
          }
        },
        step3:{
          note:'aaa'
        },
        // 附件id
        fileIds:[],
      },
      rules:{
        // 'step3.note':[{ required: true, message: this.$t('pleaseInput') }]
      },
      fromApplication:false,
      candidateTodraft:[]
    }
  },
  created () {
    // 判断是否从我的申请跳转过来
    if(this.$route.query.aorr === 'a'){
      this.fromApplication = true
    }
    if(this.$route.query.from === 'editRegister'){
      this.isReadonly = false
    }
    if(this.$route.query.endTime){
      this.endTime=this.$options.filters.moment(Number(this.$route.query.endTime))
    }
  },
  mounted(){
    this.getRegisterDetail()
    // this.reEditForm()
  },
  watch:{
    isReadonly:{
      handler(val){
        this.$nextTick(() => {
          this.getScrollHeight()
        })
      },
      immediate:true
    },
  },
  methods: {
    // 获取注册详情信息
    getRegisterDetail(){
      this.$api.getRegisterDetail({instanceId:this.$route.query.id}).then(res=>{
        this.formData=lodash.cloneDeep(JSON.parse(res.data.userRegisterJson))
        this.formData.taskId=this.$route.query.p
        this.formData.createTime=res.data.createTime
        this.formData.account=res.data.account
        this.formData.id=res.data.id
        this.formData.instanceId=res.data.instanceId
        this.formData.fileIds=res.data.fileIds||[]
        this.$nextTick(() => {
          this.getScrollHeight()
        })
      })
    },
    // 表单重新编辑点击取消按钮返回查看详情
    cancelReedit () {
      this.isReadonly=true
    },
    // 表单重新编辑点击取消按钮返回操作栏
    cancelReeditAction (){
      const vm = this
      vm.$store.dispatch('tagsView/delView', this.$route.fullPath).then(() => {
        this.$router.push({ path: '/todo/myApplication' })
      })
    },
    getBaseInfo(){
      return new Promise((resolve,reject) => {
        this.$refs.baseInfoRef.getFormData().then((data) => {
          this.baseInfo = {...data};
          resolve()
        }).catch((e) => {
          reject()
        });
      })
    },
    getCarBrand(){
      return new Promise((resolve,reject) => {
        this.$refs.CarBrandSelectRef.getFormData().then((data) => {
          this.carBrandInfo = {...data};
          resolve()
        }).catch((e) => {
          reject()
        });
      })
    },
    // 再次提交
    handleSubmit(){
      const vm = this
      Promise.all([
        this.getBaseInfo(),
        this.getCarBrand()
      ]).then(()=>{
        this.$refs.newEditForm.validate((valid) => {
        if(!valid){
          return
        }
        // 选择审批人
        const auditConfigData = this.$refs.auditProcessRef.getConfigsData()
        if (auditConfigData.length === 0) {
          return
        } 
        const data={
          step1:this.baseInfo,
          step2:this.carBrandInfo,
          step3:{
            candidates:auditConfigData,
            note:this.formData.step3.note
          }
        }
        console.log('@@@@@@@@@dasda',data)      
        const {account,id,instanceId}=this.formData
        this.$confirm({
          title: '请确认是否提交该表单？',
          content: '请确认表单内容填写准确无误，表单提交后将发起流程审核！！',
          okText: '确认提交',
          onOk() {
            vm.$api.editRegister({account,id,instanceId,userRegisterJson:JSON.stringify(data)}).then(res=>{
              vm.$info({
                title: '您已经提交了一条用户注册申请表单，请前往[我的事项]>>[我的申请]中查看',
                onOk() {
                  vm.$store.dispatch('tagsView/delView', vm.$route.fullPath).then(() => {
                    vm.$router.replace({ path: '/todo/myApplication' })
                  })
                },
              });
            })
          },
          onCancel() {
            console.log('Cancel');
          },
        })
        
      })
      }).catch(()=>{
        return
      })   
    },
    // 再次编辑
    reEditForm(){
      this.isReadonly=false
    },
    transferReviewInfo(){
      this.$emit('transferReviewInfo')
    },
    // 废止
    fz(){
      const that = this
      const h = this.$createElement
      this.$confirm({
        title: that.$t('repealTip'),
        content: h('div', [h('b',that.$t('repealContent') ), h('p', that.$t('repealContent2'))]),
        onOk () {
          that.$api.repealForm({ instanceId: that.$route.query.id }).then(
            () => {
              that.$store.dispatch('tagsView/delView', that.$route.fullPath).then(() => {
                that.$router.replace({ path: '/todo/myApplication' })
              })
            }
          )
        },
        onCancel () { }
      })
    },
    reject(){
      this.$emit('reject')
    },
    pass(){
      this.$emit('pass')
    },
    handleUrge(){
      this.$emit('handleUrge')
    },
    handleCancel(){
      this.$emit('handleCancel')
    },
    removeItem(id,index){
      this.auditInfoList=this.auditInfoList.filter(item=>{
        return item.fileId != id
      })
      this.auditList.splice(index,1)
      this.formData.fileIds.splice(index,1)
    },
    // 检测文件大小以内
    beforeUpload(file,auditList){
      // 检测文件大小50M以内
      const maxSize = 1024 * 1024 *this.fileLimitObj.fileSize
      if (file.size > maxSize) {
        const msg = this.$t('uploadLimit').replace('__SIZE__', this.fileLimitObj.fileSize+'M')
        this.$message.error(msg)
        return false
      }
      if(this.fileLimitObj.fileCount&&this.auditList.length>=this.fileLimitObj.fileCount){
          this.$message.error("该审核流程最多上传"+this.fileLimitObj.fileCount+"个文件")
          return false
      }
      return true
    },
    // 自定义上传
    doUpload (options) {
       const vm = this
      vm.$confirm({
        title: vm.$t('systemTip'),
        content:vm.$t('confirmDecrypted'),
        class: 'confirmStyle',
        icon: '<Icon >',
        width: 378,
      onOk() {
        vm.uploading = true
        vm.getChecksum(options.file).then(result => {
        const formData = new FormData()
        formData.append('file', options.file)
        fileUploadApi.uploadWholeFileToLocal(formData, { hashAlgorithm: 1, checksum: result, uploadType: 1 })
          .then(res => {
            let newFileInfo={
              fileId: res.data,
              fileName:options.file.name
            }
            vm.formData.fileIds.push(res.data * 1)
            vm.$message.success(vm.$t('uploadedSuccessfully'))
            vm.auditInfoList.push(newFileInfo)
            vm.auditList.push(options.file)
          }).finally(() => {
            vm.uploading = false
          })
      }).catch(err => {
        console.log(err)
      })},
      onCancel() {},
      })
    },
    // 获取上传文件内容md5
    getChecksum (file) {
      return new Promise((resolve, reject) => {
        const blobSlice = File.prototype.slice || File.prototype.mozSlice || File.prototype.webkitSlice
        const spark = new SparkMD5.ArrayBuffer()
        const fileReader = new FileReader()
        fileReader.readAsArrayBuffer(blobSlice.call(file, 0, file.size))
        fileReader.onload = function (e) {
          spark.append(e.target.result)
          resolve(spark.end())
        }
        fileReader.onerror = function (err) {
          reject(err)
        }
      })
    },
    // 切换审批详情tab
    changeTabs(){
      this.$set(this.formData,'taskComment',undefined)
    },
    handleScroll:lodash.debounce(function(e){
      const sHeight=e.target.clientHeight + e.target.scrollTop
      if(Math.abs(sHeight - e.target.scrollHeight) < 20){
        //到达底部
        this.activeIndex = this.scrollHeight.length -1
      }
      else if(e.target.scrollTop > this.scrollHeight[this.scrollHeight.length-1]-100){
        //距离最后一步 < 100
          this.activeIndex = this.scrollHeight.length -1
      }else{
        this.scrollHeight.map((item,index)=>{
          if(e.target.scrollTop >= item){
            this.activeIndex = index;
          }
        })
      }
    },500),
    getScrollHeight() {
      this.scrollHeight = []
      this.activities.map((item,index) => {
        let element = document.getElementById(item.id);
        if (!element) {
          // this.activities.splice(index, 1;)
        }else {
          this.scrollHeight.push(element?.offsetTop - 15);
        }
      })
    },
    // 完成时间
    handleEndTime (data) {
      this.endTime = this.$options.filters.moment(data)
    },
    // 后端控制上传文件的限制
    handleFileLimit (data) {
      this.fileLimitObj = data
    },
    // 控制撤回按钮是否显示
    handleHideWithdrawBtn (bool) {
      this.hideWithdrawBtn = bool
    },
    // 控制转交按钮是否显示
    handleHideWithTransforBtn (bool) {
      this.hideTransfor = bool
    },
    hancleStatusCheck(data){
      this.$emit('hancleStatusCheck',data)
    }
  }
}
</script>
<style lang="less" scoped>
.navigator{
  padding: 15px 24px;
  flex: none;
  border-bottom: 1px solid @borderColor;
}
.card-radius{
  border-radius: 10px;
  padding: 30px 80px 30px 46px;
}
::v-deep .ant-card-body {
  padding: 0;
}
.taskVerifyDetail {
  display: flex;
  flex-direction: column;
  .taskVerifyDetailTop {
    position: relative;
    flex: 1;
    overflow: auto;
    min-width: 800px;
  }
  .taskVerifyDetailFooter {
    font-size: 18px;
    padding: 15px 24px;
    flex: none;
    // text-align: center;
    border-bottom: 1px solid @borderColor;
    .ok {
      color: #147092 ;
      font-weight: bold;
    }
    .reject {
      color: #FF0000 ;
      font-weight: bold;
    }
    .titleBold{
      font-weight: 600;
    }
  }
}
.mr8{
  margin-right:8px
}
.attachment-style{
  border:1px solid #ccc;
  border-radius: 10px;
  height: 200px;
  ::v-deep .ant-card-head{
    background: #B8BACF;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
  }
  ::v-deep .ant-card-body{
    overflow: auto;
    padding: 10px;
    height: 150px;
  }
  .attachmentItem{
    height:40px;
    line-height: 40px;
    border-bottom: 1px solid #F5F5F5;
  }
}
.uploadAttachment-style{
  border:1px solid #ccc;
  border-radius: 10px;
  height: 200px;
  ::v-deep .ant-card-head{
    background: #B8BACF;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
  }
  ::v-deep .ant-card-body{
    padding: 10px;
    overflow: auto;
    height: 150px;
  }
  .attachmentItem{
    display: flex;
    justify-content: space-between;
    height:40px;
    line-height: 40px;
    border-bottom: 1px solid #F5F5F5;
    .fileName{
      width:70%;
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap;
    }
  }
}
.testInfo{
  width:100%;
  border-collapse: separate;
  border-spacing: 1px;
  border-top: 1px solid #ccc !important;
  border-left: 1px solid #ccc !important;
  td,tr{
   border-right: 1px solid #ccc !important;
  border-bottom: 1px solid #ccc !important;
  }
  .td1{
    font-weight: 600;
    width:200px;
    text-align: right;
  };
  .td2{
    width:calc(94% - 200px);
    color:blue;
    .info-style{
      border:1px solid rgba(20, 112, 146, 100);
      padding: 5px 8px;
      border-radius: 30px;
      margin: 0 5px;
    }
  };
}
::v-deep .deepClass{
    font-weight: 400;
    margin-right: 38px;
    text-align: right;
}
::v-deep .ant-card-bordered{
  margin-bottom: 12px;
}
.detailPaddingPage{
  padding: 12px;
  }
.marginProcess{
  margin-left: 4%;
  margin-right: 4%;
  }
::v-deep .ant-input[disabled] {
    color: #000;
    background-color: #f5f5f5;
    cursor: default;
    opacity: 1;
}
.set-margin {
  margin-right: 12px;
}
</style>

<style lang="less" scoped>
::v-deep .ant-form-item{
  margin-bottom: 8px ;
}
.basic-info-style,.software-use-style{
  ::v-deep .ant-form-item{
    margin-bottom: 8px ;
  }
  ::v-deep .ant-form-item-control{
    line-height: 20px;
  }
}
.myLabel{
  font-weight: 600;
}
::v-deep .deepClass{
    font-weight: 600;
    margin-right: 38px;
    text-align: right;

}
::v-deep .ant-form-item-label {
    font-weight: 600;
    line-height: 16px;
    // margin-right: 12px;
}
  .customFormModelItem2 {
      ::v-deep .ant-form-item-label {
        &::before {
          display: inline-block;
          content: '';
          width: 6px;
          background-color: rgba(67, 136, 166, 1);
          height: 14px;
          vertical-align: middle;
          margin-right: 3px;
        }
      }
    }

::v-deep .ant-input{
    background-color: rgba(255,255,255,100);
    color: rgba(16,16,16,100);
    font-size: 14px;
    outline: none;
    border: 1px solid rgba(187,187,187,100);
    border-radius: 8px;
  }
::v-deep .ant-input:focus {
  outline: none;
  box-shadow: none;
}
::v-deep .ant-table-thead > tr >th{
  background: #B8BACF !important;
} 
.select-style{
  ::v-deep .ant-select-selection{   
		background-color: #E6F7FF;
    color:#1684FC;
    height: 60px;
    line-height: 60px;
	}
  ::v-deep .ant-select-selection__rendered {
    line-height: 60px;
  }
}
</style>
